

//container样式
@mixin center {
    width: 1200px;
    margin: 0 auto;
}

//样式
@mixin list($w:0px, $h:120px, $margin:10px, $show:10px) {
    width: $w;
    height: $h;
    // background-color: $ground;
    margin-left: $margin;
    border-radius: $show;
}

//阴影
@mixin shadow() {
    cursor: pointer;
    // box-shadow: 4px 4px 3px #c2bfbf;
    box-shadow: 0px -2px 8px 0px #c2bfbf,
        /*上边阴影  */
        -2px 0px 8px 0px #e6e3e3,
        /*左边阴影  */
        2px 0px 8px 0px #c2bfbf,
        /*右边阴影  */
        0px 2px 8px 0px #c2bfbf;
    /*下边阴影  */
}

//价格
@mixin price($col:red, $font:10px) {
    color: $col;
    font-size: $font;
}



//导航
#navigation {
    width: 100%;
    height: 50px;
    background-color: #43240C;
    // margin-top: 40px;

   

}

//产品分类
#product {
    width: 100%;
    height: 360px;

    #container {
        @include center;
        height: 360px;
        display: flex;

        .listLeft {
            ul {
                li {
                    width: 220px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    font-size: 16px;
                    background-color: #FCF9E3;

                    &:hover {
                        background-color: #fff;
                        cursor: pointer;
                    }
                }
            }

        }

        .listRight {
            width: 980px;
            height: 358px;

            .listRight-t {
                width: 980px;
                height: 230px;
                display: flex;

                .swiper-container {
                    width: 660px;
                    height: 230px;
                    margin-left: 10px;
 


                        img {
                            width: 100%;
                            height: 100%;
                         

                            &:hover {
                                cursor: pointer;
                            }
                    }
                }

                .listRight-t-r {
                    width: 298px;
                    height: 230px;
                    margin-left: 10px;
                    background-color: #FFF4E4;

                    &:hover {
                        @include shadow();
                    }

                    .r-nine {
                        width: 298px;
                        height: 100px;

                        h3 {
                            color: #ff5817;
                            margin: 20px 20px;
                            font-size: 24px;
                        }

                        p {
                            width: 200px;
                            height: 40px;
                            color: #fff;
                            background: url() no-repeat 50%/cover;

                            color: #fff;
                            font-size: 20px;

                            line-height: 40px;
                        }
                    }

                    .r-img {
                        width: 298px;
                        height: 100px;
                        position: relative;

                        img {
                            width: 120px;
                            height: 100px;
                            position: absolute;
                            top: 0;
                            right: 18px;
                        }
                    }

                }
            }

            .listRight-b {
                width: 980px;
                height: 130px;
                display: flex;
                margin-top: 10px;

                .a {
                    @include list(326px, 120px, 10px, 16px);
                    background: linear-gradient(270deg, #ffd1dd, #fca6c0);
                    display: flex;

                    &:hover {
                        @include shadow();
                    }

                    .a-left {
                        width: 200px;
                        height: 80px;

                        h3 {
                            color: #fff;
                            font-size: 24px;
                            margin: 20px 20px 6px 26px;
                        }

                        p {
                            color: #fff;
                            font-size: 20px;
                            margin: 0px 20px 6px 26px;
                        }

                        .go {
                            width: 50px;
                            height: 20px;
                            border-radius: 20px;
                            background-color: #fff;
                            color: #FDB1C7;
                            font-size: 16px;
                            text-align: center;
                            line-height: 20px;
                            margin: 0px 20px 6px 26px;
                        }
                    }

                    .a-right {
                        width: 120px;
                        height: 120px;

                        img {
                            width: 100px;
                            height: 110px;
                        }
                    }
                }

                .b {
                    @include list(326px, 120px, 10px, 16px);
                    background: linear-gradient(270deg, #fffffe, #fec07e);
                    display: flex;

                    &:hover {
                        @include shadow();
                    }

                    .b-left {
                        width: 200px;
                        height: 80px;

                        h3 {
                            color: #fff;
                            font-size: 24px;
                            margin: 20px 14px 6px 26px;
                        }

                        p {
                            color: #fff;
                            font-size: 20px;
                            margin: 0px 14px 6px 26px;
                        }

                        .go {
                            width: 50px;
                            height: 20px;
                            border-radius: 20px;
                            background-color: #fff;
                            color: #FDB1C7;
                            font-size: 16px;
                            text-align: center;
                            line-height: 20px;
                            margin: 0px 20px 6px 26px;
                        }
                    }

                    .b-right {
                        width: 120px;
                        height: 120px;

                        img {
                            width: 120px;
                            height: 120px;

                        }
                    }

                }

                .c {
                    @include list(298px, 120px, 10px, 10px);
                    background: linear-gradient(270deg, #e7f5ff, #afdcff);
                    display: flex;

                    &:hover {
                        @include shadow();
                    }

                    .c-left {
                        width: 200px;
                        height: 80px;

                        h3 {
                            color: #fff;
                            font-size: 24px;
                            margin: 24px 0px 6px 26px;
                        }

                        p {
                            color: #fff;
                            font-size: 20px;
                            margin: 0px 0px 6px 26px;
                        }
                    }

                    .c-right {
                        width: 80px;
                        height: 80px;
                        margin: 14px 20px 0 0;
                        border: 6px solid #AFDCFF;
                        border-radius: 8px;

                        img {

                            width: 80px;
                            height: 80px;
                        }
                    }


                }
            }
        }
    }
}

//小编精选
#select {
    width: 100%;
    height: 60px;

    #container {
        @include center();
        display: flex;
        background-color: #FFFFFF;

        p {
            font-size: 18px;
            margin: 20px 30px;
        }

        span {
            font-size: 16px;
            margin: 24px 20px;
            color: #877A73;
        }
    }
}

//产品列表
#product-list {
    width: 100%;
  
    #container {
        @include center();
        .ulProduct{
            width: 100%;
            overflow: hidden;
            ul {

                li {
                    float: left;
                    width: 276px;
                    height: 388px;
                    background-color: #fff;
                    margin-right: 12px;
                    margin-left: 12px;
                    margin-bottom: 18px;
    
                    &:hover {
                        @include shadow();
                    }
    
                    .img {
                        width: 276px;
                        height: 276px;
    
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
    
                    .describe {
                        width: 242px;
                        height: 18px;
                        font-size: 14px;
                        margin: 6px 14px;
                        color: #877A73;
                        white-space: nowrap;
                        /* 文本溢出隐藏 */
                        overflow: hidden;
                        /* 文本溢出的标识是省略号 */
                        text-overflow: ellipsis;
                    }
    
                    .titie {
                        width: 242px;
                        height: 20px;
                        margin: 16px 14px 12px 14px;
                        display: flex;
                        justify-content: space-between;
    
                        .titie-l {
                            width: 40px;
                            height: 20px;
                            color: #fff;
                            background-color: #FF4400;
                            text-align: center;
                            line-height: 20px;
                            font-size: 14px;
                            border-radius: 2px;
                        }
    
                        .titie-r {
                            width: 50px;
                            height: 20px;
                            font-size: 14px;
                            color: #877A73;
                            text-align: center;
                            line-height: 20px;
                        }
                    }
    
                    .price {
                        width: 242px;
                        height: 28px;
                        margin: 0px 14px;
                        display: flex;
                        justify-content: space-between;
    
                        .price-l {
                            width: 140px;
                            height: 28px;
    
                            .a {
                                @include price(#fa585a, 14px)
                            }
    
                            .b {
                                @include price(#fa585a, 20px)
                            }
    
                            //  .c{
                            //     @include price(#fa585a,16px)
                            //  }
                            .d {
                                @include price(#877A73, 12px)
                            }
    
                        }
    
                        .price-r {
    
                            width: 50px;
                            height: 20px;
                            text-align: center;
                            color: #fa585a;
                            font-size: 12px;
                            line-height: 20px;
                            border-radius: 2px;
                            box-shadow: inset 0 0 0 1px #fa585a;
                            margin-top: 8px;
                        }
                    }
                }
    
            }
        }
        //加载更多
        .click {
            width: 180px;
            height: 50px;
            border-radius: 20px;
            text-align: center;
            line-height: 50px;
            background-color: #FEE44E;
            color: rgb(10, 10, 10);
            font-size: 20px;
            cursor: pointer;
            margin: 40px auto;
        }
    }
            //页脚
            .footer{
                width: 100%;
                    height: 240px;
                    background-color: #484848;
                .footer-t {
                    width: 1200px;
                    height: 200px;
        margin: 0 auto;
                    display: flex;
        
                    .foot-font {
                        width: 120px;
                        height: 120px;
                        margin: 37px 19px 0 40px;
        
                        img {
                            width: 100%;
                            height: 100%;
        
                        }
                    }
        
                    .foot-text {
                        width: 200px;
                        height: 100px;
                        margin: 50px 19px 0 10px;
        
                        h3 {
                            font-size: 32px;
                            font-weight: 600;
                            color: #fff;
                        }
        
                        p {
                            font-size: 18px;
                            color: #fff;
                        }
                    }
        
                    .foot-download {
                        width: 200px;
                        height: 40px;
                        font-size: 20px;
                        margin: 80px 0px 0 160px;
                        color: #fff;
                    }
                }
        
                .footer-b {
                    margin: 0 auto;
                    width: 1200px;
                    height: 40px;
        
                    p {
                        font-size: 18px;
                        text-align: center;
                        line-height: 40px;
                        color: #fff;
                    }
                }
            }
}
/* 返回顶部事件 */

.back-top {
    cursor: pointer;
    position: fixed;
    right: 50px;
    bottom: 315px;
    display: none;

     
  
    .top-img {
        width: 60px;
        height: 60px;
    }
}


